<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 分割线 -->
    <el-divider content-position="left">添加店铺管理员</el-divider>
    <el-form  :model="form" :rules="rules" ref="form" label-width="140px" label-position="left" class="demo-ruleForm" >
      <el-form-item label="店铺名称" prop="Chinese">
          <el-input style="width:30%;" v-model="form.Chinese" ></el-input>
      </el-form-item>
      <el-form-item label="店铺管理员手机号" prop="phone">
          <el-input style="width:30%;" v-model="form.phone" ></el-input>
      </el-form-item>
      <el-form-item label="店铺管理初始密码" prop="upwd">
          <el-input style="width:30%;" v-model="form.upwd" ></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
          <div id="main" style="border:1px solid #444; width:100%; height:200px;"></div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
          <el-input style="width:30%;" v-model="form.address" ></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
          <el-input style="width:30%;" v-model="form.province" ></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
          <el-input style="width:30%;" v-model="form.city" ></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
          <el-input style="width:30%;" v-model="form.district" ></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
          <el-input style="width:30%;" v-model="form.longitude" ></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
          <el-input style="width:30%;" v-model="form.latitude" ></el-input>
      </el-form-item>
      <!-- <el-form-item label="店铺营业时间" prop="tags">
          <el-select v-model="form.tags" multiple>
              <el-option v-for="item in types" :key="item.id" :value="item.tagname"></el-option>
          </el-select>
    </el-form-item> -->
      <el-form-item>
          <el-button type="primary" @click="Onsubmit" >立即添加</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
      </el-form>
      
  </div>
</template>

<script>
import breadcrumb from "../components/breadcrumb.vue";
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http';
window._AMapSecurityConfig = {
          securityJsCode:'28ac2940269eb079ba5ba8568eb907be',
      }
  export default {
    components: { breadcrumb},
      data(){
          return{
              // 判定
              sign: true,
              // 存储标签
              types :[],
              // 表单内容
              form:{
                  Chinese:'',
                  phone:'',
                  upwd:'',
                  address:'',
                  province:'',
                  city:'',
                  district:'',
                  longitude:'',
                  latitude:'',
                  // tags:[],
              },
              // 验证表单
              rules:{
                   Chinese:[ { required: true, message: '必填', trigger: 'blur' }],
                  phone:[ 
                    { required: true, message: "必填", trigger: "blur" },
                    // { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: "blur" },
                  ],
                  upwd:[ { required: true, message: '必填', trigger: 'blur' }],
                  address:[ { required: true, message: '必填', trigger: 'blur' }],
                  province:[ { required: true, message: '必填', trigger: 'blur' }],
                  city:[ { required: true, message: '必填', trigger: 'blur' }],
                  district:[ { required: true, message: '必填', trigger: 'blur' }],
                  longitude:[ { required: true, message: '必填', trigger: 'blur' }],
                  latitude:[ { required: true, message: '必填', trigger: 'blur' }],
                  // tags:[ { required: true, message: '必填', trigger: 'blur' }],
              },
          }
      },
      methods: {
          // 提交表单
          Onsubmit(){
            console.log(this.form,'添加店铺');
              this.$refs['form'].validate(valid=>{
                  if (valid) {
                      // this.form. tags = this.form.tags.join(',')
                      httpApi.storeApi.addStore(this.form).then(res =>{
                          if(res.data.code == '200'){
                              this.$message({
                              message: '恭喜你，新增店铺成功',
                              type: 'success'
                              });
                               // 跳转到店铺表页：/home/shop-list
                               this.$router.push('/home/shop-list')
                          }
                          
                      })
                  } else {
                      this.$message({
                          showClose: true,
                          message: '添加失败',
                          type: 'error'
                      });
                  }
              });
          },
          initMap() {  // 初始化地图
              AMapLoader.load({
                  key:"d666a21d4d3f2c43ab2f67fef19a9531",   // 申请好的Web端开发者Key，首次调用 load 时必填
                  version:"2.0",  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                  plugins:['AMap.Geocoder','AMap.Marker'],    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
              }).then(AMap=>{
                  this.map = new AMap.Map("main",{  //设置地图容器id
                      viewMode:"3D",    //是否为3D地图模式
                      zoom:12,           //初始化地图级别
                      center:[105.602725,37.076636], //初始化地图中心点位置
                  });
                  // 地图初始化完成后，为地图绑定点击事件，获取经纬度
                 this.map.on('click', (ev)=>{
                      // 触发事件的地理坐标，AMap.LngLat 类型
                      let { lng, lat} = ev.lnglat
                      console.log( `${ lng},${lat} `);
                      // 当获取用户选中的坐标点后，执行逆地址解析，得到地点的详细描述
                      var geocoder = new AMap.Geocoder()
                      geocoder.getAddress([lng, lat], (status, result)=> {
                          // result为对应的地理位置详细信息
                          // console.log(result);
                          // 表单回填
                          let info = result.regeocode;
                          this.form.address= info.formattedAddress;
                          this.form.city = info.addressComponent.city;
                          this.form.province = info.addressComponent.province;
                          this.form.district = info.addressComponent.district;
                          this.form.longitude = lng;
                          this.form.latitude = lat;
                          // 增添标记
                          var marker = new AMap.Marker({
                              // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                              position: new AMap.LngLat(lng,lat),   
                          })
                          // 移除已创建的 marker
                          this.map.remove(marker);
                          // 将创建的点标记添加到已有的地图实例：
                          this.map.add(marker); 
                                                     
                      })
                 }) 
                      
              })
          },

      
      },

      mounted(){
          // 初始化地图显示
          this.initMap()
          // // 加载店铺营业时间
          // httpApi.store.querystoreType().then(res =>{
          //     // console.log('标签',res);
          //     this.types = res.data.data

          // })
      }
              

       
  }
</script>

<style lang="scss" scoped>

</style>